<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图书管理案例</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>

<body>
    <div style="padding: 0 20px;">
        <!-- 添加图书的表单 -->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加新图书</h3>
            </div>
            <div class="panel-body form-inline">
                <!-- 表单输入域 -->

                <!-- 图书名称 -->
                <div class="input-group">
                    <div class="input-group-addon">书名</div>
                    <input type="text" class="form-control" id="bookname" placeholder="请输入书名">
                </div>

                <!-- 图书作者 -->
                <div class="input-group">
                    <div class="input-group-addon">作者</div>
                    <input type="text" class="form-control" id="author" placeholder="请输入作者">
                </div>

                <!-- 图书出版社 -->
                <div class="input-group">
                    <div class="input-group-addon">出版社</div>
                    <input type="text" class="form-control" id="publisher" placeholder="请输入出版社">
                </div>

                <!-- 提交按钮 -->
                <button id="addbook" class="btn btn-primary">提交</button>
            </div>
        </div>
        <!-- 表格列表 -->
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <script src="./lib/jquery.js"></script>
    <script>
        $(function () {
            //加载原有设定的列表
            function loadBookList() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                    var bookList = res.data;
                    var bookTag
                    var bookTags = []
                    $.each(bookList, function (index, book) {
                        bookTags.push(`
              <tr>
                <td>${book.id}</td>
                <td>${book.bookname}</td>
                <td>${book.author}</td>
                <td>${book.publisher}</td>
                <td class='del' data-id='${book.id}'>删除</td>
              </tr>
            `)
                    })
                    $('tbody').html(bookTags.join(''))
                })
            }
            loadBookList()

            // 绑定提交按钮事件
            $('#addbook').click(function () {
                // 添加图书
                // 1、获取表单数据
                var bookname = $('#bookname').val()
                var author = $('#author').val()
                var publisher = $('#publisher').val()
                // 1-1、表单验证
                if (!bookname) {
                    alert('图书名称不能为空')
                    return
                }
                if (!author) {
                    alert('图书作者不能为空')
                    return
                }
                if (!publisher) {
                    alert('图书出版社不能为空')
                    return
                }
                // 2、调用后台接口添加图书
                $.post('http://www.liulongbin.top:3006/api/addbook', {
                    bookname: bookname,
                    author: author,
                    publisher: publisher
                }, function (res) {
                    if (res.status === 201) {
                        // 添加图书成功，刷新列表
                        // 3、刷新列表
                        loadBookList()
                        // 4、清空表单
                        $('#bookname').val('')
                        $('#author').val('')
                        $('#publisher').val('')
                    }
                })

            })

            // 绑定删除按钮的事件
            $('tbody').on('click', '.del', function () {
                var id = $(this).data('id')
                $.get('http://www.liulongbin.top:3006/api/delbook', {
                    id: id
                }, function (res) {
                    if (res.status === 200) {
                        // 刷新列表
                        loadBookList()
                    }
                })
            })
        })

    </script>
</body>

</html>